<template>
  <div>
    <h3>分类数据接口地址：http://老师IP:3000/api/menus.json</h3>

    <!-- 一级菜单 -->
    <el-menu mode="horizontal" @select="topMenuSelected" :default-active="''+current">
      <el-menu-item
        :index="''+k"
        v-for="(v,k) in menus"
        :key="v.id"
      >
        {{v.label}}
      </el-menu-item>
    </el-menu>
    <!-- 二、三菜单 -->
    <div style="width: 200px">
      <el-menu :unique-opened="true" @select="leftMenuSelected" :default-active="'' + subMenuSelected">
        <template v-for="v in menus[current].children">
          <template v-if="menus[current].children[0].children">
            <el-submenu :key="v.id" :index="'' + v.id">
              <template slot="title">{{v.label}}</template>
              <el-menu-item
                v-for="v1 in v.children"
                :key="v1.id"
                :index="'' + v1.id"
              >
                {{v1.label}}
              </el-menu-item>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :key="v.id" :index="'' + v.id">
              {{v.label}}
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </div>

  </div>
</template>

<script>
import menus from '../../data/menus.json'
export default {
  name: 'Test',
  data() {
    return {
      menus: menus.data
    }
  },
  methods: {
    topMenuSelected(index) {
      this.$store.commit('setTestMenuTop', index)
      this.$store.commit('setTestMenuLeft', 0)
    },
    leftMenuSelected(index) {
      this.$store.commit('setTestMenuLeft', index)
    }
  },
  computed: {
    current() {
      return this.$store.state.cache.testMenu.top
    },
    subMenuSelected() {
      if (this.$store.state.cache.testMenu.left !== 0) {
        return this.$store.state.cache.testMenu.left
      } else {
        if (this.menus[this.current].children[0].children) {
          return this.menus[this.current].children[0].children[0].id
        } else {
          return this.menus[this.current].children[0].id
        }
      }
    }
  }
}
</script>
